<template lang="html">
  <section class="components-coach_order_detail-list">
    <ul class="member-list" v-if="list && list.length > 0">
      <li class="member-item" v-for="item in list">
        <div class="avatarWrapper">
          <img :src="item.headimgurl" alt="">
        </div>
        <div class="infoLeft">
          <span class="infoItem">{{item.nickname}}</span>
          <span class="infoItem">{{gender(item.sex)}}</span>
        </div>
        <div class="infoRight">
          <span class="infoItem">{{position(item.position)}}</span>
          <span class="infoItem">{{item.mobile}}</span>
        </div>
      </li>
    </ul>
    <p class="member-list_none" v-else>- 暂无学员报名 -</p>
  </section>
</template>

<script>
import _config from '@/constant/config'
let positionDist = _config.POSITION_DIST
let genderDist = _config.GENDER_DIST

export default {
  name: 'Components--students-list',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    gender: (function(){
      let dist = {}, defaultValue = '男'
      return function(val){
        if(dist[val]){
          return dist[val]
        }
        let res = genderDist.filter(item => item.id == val)[0]
        if(!res) return defaultValue
        return dist[val] = res.value
      }
    })(),
    position: (function(){
      let dist = {}, defaultValue = '无'
      return function(val){
        if(dist[val]){
          return dist[val]
        }
        let res = positionDist.filter(item => item.id == val)[0]
        if(!res) return defaultValue
        return dist[val] = res.value
      }
    })()
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
$contentSize: 90px;
.components-coach_order_detail-list{
  width: 100%;
  box-sizing: border-box;
  padding: 23px 48px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #fff;
  .member-list_none{
    display: block;
    width: 100%;
    line-height: 2;
    text-align: center;
    font-size: 26px;
    color: #000;
    letter-spacing: 1px;
  }
  .member-list{
    display: block;
    width: 100%;
    & .member-item:nth-child(1){
      border-top: 0;
    }
    .member-item{
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 135px;
      box-sizing: border-box;
      padding-left: 115px;
      border-top: 1px solid $common-red;
      overflow: hidden;
      .avatarWrapper{
        position: absolute;
        top: 50%;
        left: 0;
        width: $contentSize;
        height: $contentSize;
        box-sizing: border-box;
        border: 1px solid $common-red;
        border-radius: 100%;
        transform: rotate(0deg) translateY(-50%);
        overflow: hidden;
        img{
          position: absolute;
          display: block;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
        }
      }
      .infoLeft{
        width: 170px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .infoRight{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        box-sizing: border-box;
        padding-left: 10px;
      }
      .infoItem{
        display: block;
        line-height: 40px;
        font-size: 24px;
        font-weight: 100;
        color: #3d3d3d;
        @include text-overflow;
      }
    }
  }
}
</style>
